<template>
  <div class="questions-select">
    <el-row>
      <div class="btn_wrapper">
        <el-alert
          :closable="false"
          title="说明：目前支持学科和关键字条件筛选"
          type="error"
        >
        </el-alert>
        <el-button type="success" size="small" icon="el-icon-edit"
          >新增试题</el-button
        >
      </div>
    </el-row>
    <el-row :gutter="20">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="80px"
        size="medium "
      >
        <el-col :span="6">
          <el-form-item label="学科" prop="subject">
            <el-select
              v-model="ruleForm.subject"
              placeholder="请选择"
              @change="secondSub(ruleForm.subject)"
            >
              <el-option
                :label="sub.label"
                :value="sub.value"
                v-for="sub in SubjectList"
                :key="sub.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="secondsub">
            <el-select v-model="ruleForm.secondsub" placeholder="请选择">
              <el-option
                :label="sub2.label"
                :value="sub2.value"
                v-for="sub2 in secondSubList"
                :key="sub2.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tag">
            <el-select v-model="ruleForm.tag" placeholder="请选择">
              <el-option
                :label="tag.label"
                :value="tag.value"
                v-for="tag in tagList"
                :key="tag.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyValue">
            <el-input
              v-model="ruleForm.keyValue"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="ruleForm.questionType" placeholder="请选择">
              <el-option
                :label="type.label"
                :value="type.value"
                v-for="type in questionType"
                :key="type.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="ruleForm.difficulty" placeholder="请选择">
              <el-option
                :label="diff.label"
                :value="diff.value"
                v-for="diff in difficulty"
                :key="diff.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="ruleForm.direction" placeholder="请选择">
              <el-option
                :label="type"
                :value="type"
                v-for="(type, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="admin">
            <el-select v-model="ruleForm.admin" placeholder="请选择">
              <el-option
                :label="usertype.username"
                :value="usertype.id"
                v-for="usertype in userList"
                :key="usertype.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="enterprise">
            <el-input v-model="ruleForm.enterprise"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" prop="city">
            <el-select
              class="city-select select2"
              v-model="ruleForm.city"
              placeholder="请选择"
              @change="optionCity"
            >
              <el-option
                :label="c1"
                :value="c1"
                v-for="(c1, index) in allCity"
                :key="index"
              ></el-option>
            </el-select>
            <el-select
              class="city-select"
              v-model="ruleForm.area"
              placeholder="请选择"
            >
              <el-option
                :label="area"
                :value="area"
                v-for="(area, index) in allArea"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="clearBtn">
            <el-button type="primary" plain @click="resetForm('ruleForm')"
              >清除</el-button
            >
            <el-button type="primary" @click="submitForm('ruleForm')"
              >搜索</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import * as subjects from "@/api/hmmm/subjects";
// import  simple  as circle from "@/api/hmmm/subjects";
import * as tags from "@/api/hmmm/tags";
// import { simple } from "@/api/hmmm/tags";
import * as directorys from "@/api/hmmm/directorys";
// import { simple } from "@/api/hmmm/directorys";
import * as users from "@/api/base/users";
// import { profile } from "@/api/base/frame";
import * as constants from "@/api/hmmm/constants";
import * as city from "@/api/hmmm/citys";
export default {
  name: "QuestionsSelect",
  data() {
    return {
      ruleForm: {
        subject: "", // 当前选中的学科ID
        secondsub: "", //  当前选中的二级目录
        tag: "", //  当前选中的标签
        keyValue: "", //  当前选中的关键字
        questionType: "", //试题类型
        difficulty: "", // 难度
        direction: "", // 方向
        admin: "", // 当前录入人
        title: "", //题目备注
        enterprise: "", // 企业简称
        city: "", //选中的城市
        area: "" // 选中的城市下地区
      },
      SubjectList: [], // 二级目录列表
      tagList: [], //所有的学科列表
      secondSubList: [], // 标签列表
      userList: [], //管理员权限列表
      questionType: constants.questionType, // 试题类型
      difficulty: constants.difficulty, // 难度
      direction: constants.direction, //方向
      userList: [], // 录入人
      allCity: city.provinces(), //城市
      allArea: [] // 城市下地区
    };
  },
  created() {
    this.getSubject();
  },
  methods: {
    // 页面渲染后就获取以下内容
    getSubject() {
      // 获得所有学科名称
      subjects
        .simple()
        .then(({ data }) => {
          this.SubjectList = data;
        })
        .catch(() => {
          this.$message.error("获取学科失败！");
        });
      // 获得录入人类型
      users
        .simple()
        .then(({ data }) => {
          this.userList = data;
        })
        .catch(() => {
          this.$message.error("获取录入人失败！", error);
        });
    },
    // 选择学科后，获取以下内容
    secondSub(id) {
      // 获得二级目录
      directorys
        .simple({ subjectID: id })
        .then(({ data }) => {
          this.secondSubList = data;
        })
        .catch(() => {
          this.$message.error("获取学科失败！", error);
        });
      // 获得标签
      tags
        .simple({ subjectID: id })
        .then(({ data }) => {
          this.tagList = data;
        })
        .catch(() => {
          this.$message.error("获取标签失败！", error);
        });
    },
    // 选择城市后 获取城市下地区
    optionCity() {
      this.allArea = city.citys(this.ruleForm.city);
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  提交表单
    submitForm(formName) {
      console.log(this.ruleForm);
    }
  }
};
</script>

<style scoped>
.el-select {
  width: 100%;
}
.city-select {
  width: 49%;
}
.select2 {
  margin-right: 2%;
}

.el-row {
  margin-bottom: 20px;
}

.btn_wrapper {
  display: flex;
  justify-content: space-between;
}
.el-alert--error {
  background-color: #fff;
}
.clearBtn {
  display: flex;
  justify-content: flex-end;
}
</style>
